<template>
  <view class="content" v-if="isShow">
    <operation ref="operation" @clickId="clickId"></operation>
    <pop-message ref="popMessage"></pop-message>
    <login v-if="is_login" v-on:x="to_login" v-on:plogin="to_login"></login>
    <!--    隐私协议-->
    <generate-privacy-protocol></generate-privacy-protocol>
    <!--      head-->
    <view class="head" :style="headStyle">
      <view class="tap" :style="tapStyle">
        <view class="tap-item" :class="swiperIndex===0?'tap-active':''" @click="swiperIndex=0">
          <text>大家说</text>
          <view class="tap-xian" v-if="swiperIndex===0"></view>
        </view>
        <view class="tap-item" :class="swiperIndex===1?'tap-active':''" @click="swiperIndex=1">
          <text>话题广场</text>
          <view class="tap-xian" v-if="swiperIndex===1"></view>
        </view>
        <view class="tap-item" :class="swiperIndex===2?'tap-active':''" @click="swiperIndex=2">
          <text>我的</text>
          <view class="tap-xian" v-if="swiperIndex===2"></view>
        </view>
      </view>
    </view>
    <message-list v-show="swiperIndex!==2" ref="messageList"></message-list>
    <!--      swiper-->
    <swiper class="swiper" :current="swiperIndex" @change="swiperChange">
      <swiper-item class="swiper-item">
        <share-friends @setTopicInfo="setFriends" ref="shareFriends"></share-friends>
        <circle-of-friends @setTopicInfo="setFriends" @commentHide="footerMenuShow=true"
                           @commentShow="footerMenuShow=false" ref="circleOfFriends"></circle-of-friends>
      </swiper-item>
      <swiper-item class="swiper-item">
        <index ref="index" @setTopicInfo="setTopicInfo"></index>
      </swiper-item>
      <swiper-item class="swiper-item">
        <member ref="member" @showOperation="showOperation"></member>
      </swiper-item>
    </swiper>
    <footer-menu ref="footerMenu" :active="'circle'"/>
  </view>
</template>
<script>
import index from "@/pages/circle/components/index.vue";
import member from "@/pages/circle/components/member.vue";
import operation from "@/pages/circle/components/operation.vue";
import PopMessage from "@/pages/circle/components/popMessage.vue";
import circleOfFriends from "@/pages/circle/circleOfFriends/circleOfFriends.vue";
import messageList from "@/pages/circle/components/messageList.vue";
import shareFriends from "@/pages/circle/circleOfFriends/shareFriends.vue";

export default {
  components: {PopMessage, operation, index, member, circleOfFriends, messageList, shareFriends},
  data() {
    return {
      menuInfo: uni.getStorageSync("menuInfo"),
      headStyle: "",
      tapStyle: "",
      swiperIndex: 0,
      topicInfo: {},
      is_login: false,
      footerMenuShow: true,
      friendsInfo: {},
      shareType: "",
      isShow: false
    }
  },
  watch: {
    footerMenuShow: function (newValue, oleValue) {
      if (newValue) {
        this.$refs.footerMenu.show()
      } else {
        this.$refs.footerMenu.hide()
      }
    }
  },
  onLoad(option) {
    this.headStyle = `height: ${this.menuInfo.contentTop};padding-top:${this.menuInfo.menuTop};`;
    this.tapStyle = `height: ${this.menuInfo.menuHeight};padding-left: ${this.menuInfo.menuRight};`
    this.$refs.index.init()
  },
  onShow() {
    this.getIsShow()
    // 聚焦到话题广场
    if (uni.getStorageSync("taskId") === 3) {
      this.swiperIndex = 1
    }
    // 聚焦说说广场
    if ([2, 100].includes(uni.getStorageSync('taskId'))) {
      this.swiperIndex = 0
    }
    this.is_login = !uni.getStorageSync("token");
    if (this.is_login) {
      return
    }
    this.$refs.member?.setTapIndex('all')
    let info = uni.getStorageSync('circleDetails')
    if (info && this.swiperIndex === 1) {
      uni.setStorageSync("circleDetails", false)
      this.$refs.index.setListItem(info.index, info.info)
    }
    let friendsId = uni.getStorageSync("isSendFriends") || false
    if (friendsId) {
      uni.setStorageSync('isSendFriends', false)
      this.$refs.shareFriends.show(friendsId)
    }
    uni.$on("setListVoteIndex", (data) => {
      this.$refs.index.setPk(data)
      uni.$off('setListVoteIndex')
    })
    this.getPkMessage()
    // 初始化新手任务
    this.circleOfFriendsInitTask()
  },
  methods: {
    circleOfFriendsInitTask() {
      if (this.$refs.circleOfFriends) {
        this.$refs.circleOfFriends.initTask()
      } else {
        setTimeout(() => {
          this.circleOfFriendsInitTask()
        }, 500)
      }
    },
    // 是否显示发布话题
    async getIsShow() {
      let res = await this.$javaCircle.doRequest("post", "userservice/checkLine", '', '')
      this.isShow = !(res.data.data === null ? true : res.data.data);
    },
    to_login() {
      this.is_login = false
      this.$refs.index.init('login')
      this.$refs.member.setTapIndex('all')
      this.$refs.footerMenu.getConfig();
      this.$refs.circleOfFriends.getList();
      this.$refs.messageList.initMessage()
      this.getPkMessage()
    },
    // 检测等级变化
    async levelNotice() {
      let {data} = await this.$javaCircle.doRequest("get", 'circle/customer/comment/levelNotice', '', '', false)
      // data.data.commentLevel=5
      // data.data.shineLevle=2
      setTimeout(() => {
        if (data.data.commentLevel > 0) {
          this.$refs.popMessage.showComment(parseInt(data.data.commentLevel))
          return
        }
        if (data.data.shineLevle > 0) {
          this.$refs.popMessage.showShine(parseInt(data.data.shineLevle))
        }
      }, 500)
    },
    // 首次进入弹框
    showIndex() {
      let indexStatus = uni.getStorageSync("circleIndexMessage")
      if (!indexStatus) {
        setTimeout(() => {
          this.$refs.popMessage.showIndex()
          uni.setStorageSync('circleIndexMessage', true)
        }, 1000)
      }
    },
    swiperChange(e) {
      if (uni.getStorageSync('taskId') === 100 && e.detail.current !== 0) {
        uni.setStorageSync("taskId", false)
      }
      this.swiperIndex = e.detail.current
      if (e.detail.current === 1) {
        this.$refs.index.init()
        this.showIndex()
        this.levelNotice()
      } else if (e.detail.current === 2) {
        this.$refs.member.setTapIndex('all')
      } else if (e.detail.current === 0) {

      }
      if ([0, 1].includes(e.detail.current)) {
        this.$refs.messageList.show();
      } else {
        this.$refs.messageList.hide();
      }
      this.getPkMessage()
    },
    async getPkMessage() {
      let res = await this.$javaCircle.doRequest("get", 'circle/customer/vote/getHasViewedIntegral', '', '', false)
      if (res.data.code === 0 && res.data.data !== 0) {
        this.$refs.popMessage.showMessage6F(res.data.data)
      }
    },
    showOperation(array) {
      this.$refs.operation.showPop(array)
    },
    clickId(id) {
      this.$refs.member.clickId(id)
    },
    setTopicInfo(info) {
      this.topicInfo = info
      this.shareType = 'topic'
    },
    setFriends(info) {
      this.friendsInfo = info
      if (info.picUrl) {
        let file = JSON.parse(info.picUrl)
        if (file.length === 0) {
          this.friendsInfo.thumb = ''
        } else {
          file = file[0]
          this.friendsInfo.thumb = file.fileType === 'image' ? file.url : file.thumbUrl
        }
      }
      this.shareType = 'friends'
    }
  },
  onShareAppMessage(res) {
    if (this.shareType === 'topic') {
      this.$javaCircle.doRequest("post", 'circle/customer/topic/setShareNum?topicId=' + this.topicInfo.id, '', '', false)
      return {
        title: this.topicInfo.title,
        path: "/pages/circle/details/details?id=" + this.topicInfo.id,
        imageUrl: this.topicInfo.thumb
      }
    } else if (this.shareType === 'friends') {
      console.log(this.friendsInfo);
      return {
        title: this.friendsInfo.content,
        path: "/pages/circle/circleOfFriends/details?id=" + this.friendsInfo.id,
        imageUrl: this.friendsInfo.thumb || 'https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/quanzi/shenImage.png'
      }
    }
  },
  onHide() {
    this.$refs.circleOfFriends.destroyTask()
  },
}
</script>
<style scoped>
.content {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.head {
  width: 100%;
  background-color: #54B174;
  box-sizing: border-box;
}

.tap {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.tap-item {
  margin-left: 40upx;
  color: #fff;
  font-size: 36upx;
  font-weight: 500;
  position: relative;
  transition: all .3s linear;
}

.tap-active {
  font-size: 38upx !important;
  font-weight: 600;
}

.tap-xian {
  width: 80upx;
  height: 6upx;
  background-color: #fff;
  border-radius: 6upx;
  position: absolute;
  bottom: -16upx;
  left: 50%;
  transform: translate(-50%, 0);
}

.swiper {
  flex: 1;
}

.swiper-item {
}
</style>
